import React, { useEffect } from 'react';
//  获取rtk仓库中的数据并修改rtk仓库数据
import { useSelector, useDispatch } from 'react-redux';
// 导入修改state 数据reducer 中的方法
import { addAge, editusername } from '../../store-rtk-mokuaihua/slicers/userSlicer';
import { addPrice, editname, getnavdataAsync } from '../../store-rtk-mokuaihua/slicers/goodsSlicer'

const Father = () => {
    // 获取store 数据
    const { user, goods } = useSelector(state => state);
    const dispatch = useDispatch();

    // console.log(user, goods);
    useEffect(() => {
        // 调用异步的reducer 进行初始化数据
        dispatch(getnavdataAsync())

    }, [])

    return (
        <div>
            <p>store 仓库中的数据: {user.name}--{user.age}</p>
            <p>
                <button onClick={() => dispatch(addAge())}>修改年龄</button>
                <button onClick={() => dispatch(editusername('谢广坤'))}>修改姓名</button>
            </p>

            <hr />
            <p>store 仓库中的数据: {goods.name}--{goods.price}</p>
            <p>
                <button onClick={() => dispatch(addPrice())}>修改年龄</button>
                <button onClick={() => dispatch(editname('华为mate50'))}>修改姓名</button>
            </p>
            <hr />
            <ul>
                {
                    goods.navlist.map((item) => {
                        return <li key={item.id}>
                            <span>{item.name}</span>
                            <img src={item.icon_url} />
                        </li>
                    })
                }
            </ul>

        </div>
    );
}

export default Father;
